<template>
  <div id="home" @scroll="handeScroll">
    <NavBar class="home-nav">
      <div slot="center">购物街</div>
    </NavBar>
    <HomeSwiper :banners="banners" />
    <RecommendView :recommends="recommends" />
    <FeatureView />
    <TabControl
      :titles="tabController"
      class="tab-control"
      @tabClick="tabClick"
    />
    <GoodsList :goods="goods[tabKey].list" />
    <BackTop v-show="isBackTopShow" />
  </div>
</template>

<script>
// 函数
import { getHomeMultidata, getHomeGoods } from "network/home";

// 首页子组件
import HomeSwiper from "./childComps/HomeSwiper";
import RecommendView from "./childComps/RecommendView";
import FeatureView from "./childComps/FeatureView";
import GoodsList from "components/content/goods/GoodsList";
import BackTop from "components/content/backTop/BackTop";

// 公共组件
import TabControl from "components/content/tabControl/TabControl";
import NavBar from "components/common/navbar/NavBar";

import pop from "../../data/pop.json";
import news from "../../data/news.json";
import sell from "../../data/sell.json";

const map = new Map([
  ["pop", pop],
  ["news", news],
  ["sell", sell]
]);

export default {
  data() {
    return {
      center: "center",
      result: null,
      tabKey: "pop",
      isBackTopShow: false,
      tabController: [
        { key: "pop", name: "流行" },
        { key: "news", name: "新款" },
        { key: "sell", name: "精选" }
      ],
      banners: [
        {
          link: "http://baidu.com",
          image:
            "https://img11.360buyimg.com/n7/jfs/t14971/217/2649724097/346210/af77cc0/5ab20350N25444a44.jpg"
        },
        {
          link: "http://baidu.com",
          image:
            "https://img12.360buyimg.com/n7/jfs/t1/132023/9/9411/256405/5f58c3d0E993ae654/7a54da7a13d685d3.png"
        },
        {
          link: "http://baidu.com",
          image:
            "https://img11.360buyimg.com/n7/jfs/t1/142566/30/19506/217658/5fe0af64Eebd27f0e/bada8781f8844021.png"
        },
        {
          link: "http://baidu.com",
          image:
            "https://img12.360buyimg.com/n7/jfs/t10657/91/404765864/233296/31b12b61/59cdc5ddNfc4f03e1.jpg"
        }
        // {link:'http://baidu.com', image:'https://img10.360buyimg.com/n7/jfs/t1/139281/29/5371/119743/5f35020aE59db7535/cc0f8d5ea7dbb2a8.jpg'},
      ],
      recommends: [
        {
          title: "灰格西装",
          link: "http://baidu.com",
          image:
            "https://img13.360buyimg.com/n7/jfs/t1/142350/16/12237/176557/5f98cff6E081d4b1e/c5d00b8e703f6fd4.jpg"
        },
        {
          title: "小个子派克服",
          link: "http://baidu.com",
          image:
            "https://img10.360buyimg.com/n7/jfs/t1/137701/6/5479/159564/5f37ecb3Eb0d3468e/96e8e35c7c4d430f.jpg"
        },
        {
          title: "白色羽绒服",
          link: "http://baidu.com",
          image:
            "https://img11.360buyimg.com/n7/jfs/t1/154521/29/10912/844328/5fe01730E1c748bb1/0e57658ff5ae25e2.png"
        },
        {
          title: "短外套",
          link: "http://baidu.com",
          image:
            "https://img14.360buyimg.com/n7/jfs/t1/143641/36/12171/183246/5f984a0cE6195172a/9135109a497be735.jpg"
        }
      ],
      goods: {
        pop: { page: 0, size: 20, list: [] },
        news: { page: 0, size: 20, list: [] },
        sell: { page: 0, size: 20, list: [] }
      }
    };
  },
  created() {
    this.initDate();
  },
  methods: {

   
    tabClick(key = "pop") {
      // console.log(key)
      this.tabKey = key;
    },
    a() {
      console.log('-------------滚动');
    },

    handeScroll() {
        console.log("滚动监听");
      window.removeEventListener('scroll',null)
      window.onscroll = () => {
        console.log("滚动监听");
        const el = document.documentElement;
        this.isBackTopShow = el.scrollTop > 2000;
        if (this.isScrollBottom(el)) {
          // console.log("到底不了，加载更多。。。。。");
          this.page(this.tabKey);
        }
        // console.log(this.isScrollBottom(el));
      };
    },
    isScrollBottom(obj) {
      // scrollTop 滚动条滚动时，距离顶部的距离
      let scrollTop = obj.scrollTop || document.body.scrollTop;
      // windowHeight 可视区的高度
      let windowHeight = obj.clientHeight || document.body.clientHeight;
      // scrollHeight 滚动条的总高度
      let scrollHeight = obj.scrollHeight || document.body.scrollHeight;
      // 滚动条到底部的条件
      // console.log("距离顶部的距离:" + scrollTop);
      // console.log("可视区的高度:" + windowHeight);
      // console.log("滚动条的总高度:" + scrollHeight);
      // console.log("滚动条到底部的条件:" + (scrollTop + windowHeight));
      if (Math.round(scrollTop + windowHeight) == scrollHeight) {
        return true;
      } else {
        return false;
      }
    },

    initDate() {
      this.page("pop");
      this.page("sell");
      this.page("news");
    },
    page(type) {
      let { page, size, list } = this.goods[type];
      const totalData = map.get(type);
      const { length } = totalData;
      if (list.length == length && list.length > 0) {
        return;
      }
      this.goods[type].page = page = page + 1;

      let data = [];

      if (size >= length) {
        //pageSize大于等于总数据长度，说明只有1页数据或没有数据
        data = totalData;
      } else {
        //pageSize小于总数据长度，数据多余1页
        const num = size * (page - 1); //计算当前页（不含）之前的所有数据总条数
        if (num < length) {
          //如果当前页之前所有数据总条数小于（不能等于）总的数据集长度，则说明当前页码没有超出最大页码
          const startIndex = num; //当前页第一条数据在总数据集中的索引
          const endIndex = num + size - 1; //当前页最后一条数据索引
          data = totalData.filter(
            (_, index) => index >= startIndex && index <= endIndex
          ); //当前页数据条数小于每页最大条数时，也按最大条数范围筛取数据
        } else {
          //当前页码超出最大页码，则计算实际最后一页的page，自动返回最后一页数据
          const count = parseInt(length / size); //取商
          const rest = length % size; //取余数
          if (rest > 0) {
            //余数大于0，说明实际最后一页数据不足pageSize，应该取size+1为最后一条的页码

            data = totalData.filter(
              (_, index) => index >= size * count && index <= length
            );
          } else if (rest === 0) {
            //余数等于0，最后一页数据条数正好是pageSize

            data = totalData.filter(
              (_, index) => index >= size * (count - 1) && index <= length
            );
          } //注：余数不可能小于0
        }
      }
      this.goods[type].list.push(...data);
    }
  },
  components: {
    RecommendView,
    HomeSwiper,
    FeatureView,
    GoodsList,
    BackTop,

    NavBar,
    TabControl
  },
  mounted() {
    // this.handeScroll();
    // this.a()
  }
};
</script>

<style>
/* html,body,#home {
 
  width: 100%;
} */

#home {
  padding-top: 44px;
  /* width: 500px */
  }
.home-nav {
  background-color: var(--color-tint);
  color: #fff;
  position: fixed;
  right: 0;
  left: 0;
  top: 0;
  z-index: 9;
}

.tab-control {
  position: sticky;
  top: 44px;
  z-index: 9;
}
</style>
